<!--
 * @Description  :
 * @Author       : YiDing Xue
 * @Date         : 2023-02-27
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <div v-show="audioStore.miniPlayerShow">
    <nut-drag ref="dragRef" direction="y" :style="dragStyle">
      <div class="player flex justify-around items-center p-10 bg-white">
        <router-link to="works-audio">
          <nut-image :src="audioStore.playInfo.imgUrl" width="20" height="28" @click="toPlayer" />
        </router-link>
        <audio ref="audioRef" autoplay class="audio-component" controls preload="auto" @canplay="onCanplay" @timeupdate="onTimeUpdate" @error="onError" @ended="onEnded">
          <source ref="sourceRef" type="audio/mpeg" />
        </audio>
        <div flex justify-center items-center px-10 @click="ifPlay(!audioStore.playStatus)">
          <TheIcon :color="audioStore.playStatus ? '#fcd006' : '#d9d9d9'" :icon="audioStore.playStatus ? 'gg:play-pause-o' : 'gg:play-button-o'" :size="30" />
        </div>

        <div flex justify-center items-center @click="closeMiniPlayer">
          <TheIcon icon="mdi:close-circle-outline" :size="30" />
        </div>
      </div>
    </nut-drag>
  </div>
</template>
<script setup>
import { useAudioStore } from '@/store'
const audioStore = useAudioStore()
const dragStyle = reactive({ top: '200px' })
const dragRef = ref()
const audioRef = ref(null)
const sourceRef = ref(null)
/** 初始化播放资源 */
const initAudioSource = () => { }

const toPlayer = () => {
  audioRef.value.play()
}

/**
 * 是否播放
 * @param {Boolean} playStatus 播放状态 true-播放 false-暂停
 */
const ifPlay = playStatus => {
  audioStore.setPlayStatus(playStatus)
}

const closeMiniPlayer = () => {
  audioStore.setPlayStatus(false)
  audioStore.setMiniPlayerShow(false)
}

/** 监听音频进入可播放状态事件 */
const onCanplay = () => {
  // if (playDuration.value !== musicAudio.value.duration) {
  //   // 修改进度条的最大值
  //   sliderLength.value = musicAudio.value.duration
  //   // 修改歌曲播放时间
  //   playDuration.value = musicAudio.value.duration
  // }
}

/** 监听音频播放进度更新事件 */
const onTimeUpdate = event => {
  if (parseInt(event.target.currentTime) > audioStore.playInfo.endTime) {
    audioStore.setPlayTime(parseInt(event.target.currentTime))
  }
}

const onEnded = () => {
  audioStore.switchEpisode(false)
}

const onError = error => {
  $message.error(error)
}

/** 触摸结束 */
const mouseDown = () => {
  dragStyle.top = dragRef.value.$el.getBoundingClientRect().top
}

onMounted(() => {
  initAudioSource()
  audioStore.setAudioAndSource(audioRef.value, sourceRef.value)
})
</script>
<style lang="scss">
.player {
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 60%);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
// 隐藏默认播放器的样式
.audio-component {
  display: none;
}
</style>
